<template>
  <div class="hello" >
      <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <!-- Brand/logo -->
        <a class="navbar-brand" href="#">Logo</a>
        <!-- Links -->
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Link 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" @click="toM12Server">m12</a>
          </li>
          <li class="nav-item">
            <a class="nav-link"><router-link to="/first">Users</router-link></a>
          </li>
        </ul>
      </nav>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <textarea name="editor" id="editor" v-model="data">{{data}}</textarea>
  </div>




</template>

<script>
  //创建 mditor实列
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: 'Hello World',
        data : '# Hello World',
      }
    },
    //编译好的HTML挂载到页面完成后执行的事件钩子，此钩子函数中一般会做一些axios请求获取数据。
    mounted: function () {
      this.M12();
    },
    methods:{
      //执行钩子
     M12 () {
        let data = this.data;
        let mditor = Mditor.fromTextarea(document.getElementById('editor'));
        console.log("执行成功~");
        mditor.on('ready', function () {
          console.log(mditor.value);
        });
        console.log("获取到value！");
        console.log(mditor.value);
        this.data = mditor.value;
        return this.data;
      },
      toM12Server :function(){
        console.log("我把数据发送给M12服务器了",mditor.value);
        let MarkdownData = new FormData();
        MarkdownData.append('MarkDownData',encodeURIComponent(mditor.value));
        this.axios.post("/data",MarkdownData).then(function (response) {
          console.log(response);
        }).catch(function (error) {
          alert("M12服务器爆炸！");
          console.log(error);
        })

      }
  }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
